<template>
  <div class="lotterylobby-main-content">
    
    <div class="ll-main-content-title">
      <div class="pc-lskj" v-if="this.$store.state.lotteryType == 'l28' || this.$store.state.lotteryType == 'k3' || this.$store.state.lotteryType == 'l3d'">
        <!-- 历史开奖 -->
        <div class="hispa-icon-title">
            <img class="hispa-icon" :src="this.pclskj.url" alt="">
            <span class="hispa-title">{{this.pclskj.title}}</span>
          </div>
      </div>
      <div class="ll-main-content-titlepc">
        <div class="query-area-line"></div>
        <span class="query-area-input-outbox">统计
          <input v-model="queryNum" type="text" placeholder="30" class="query-area-input my_text_center">&nbsp;期</span>
        <button class="query-area-btn" @click="llQueryData">查询</button>
      </div>
      
    </div>
    <div v-if="isJinRiNumberShow">
    <div class="ll-content-numstatistics" v-if="this.$store.state.lotteryType !== 'l28'&&this.$store.state.lotteryType !== 'k3' && this.$store.state.lotteryType !== 'l3d'">
      <div class="numstatistics-title-area">
        <span class="numstatistics-title-text">今日双面统计</span>
      </div>
      <div class="numstatistics-result-show">
        <!-- 今日双面统计号码出现次数 -->
        <div class="numstatistics-result-no">
          <his-num-table :tableData="numberStatisLists" v-if="this.$store.state.lotteryType != 'pk10'"></his-num-table>
          <his-ball-table :hisBallDataVar="numberStatisLists" v-if="this.$store.state.lotteryType == 'pk10'"></his-ball-table>
        </div>
        <!-- 今日双面统计球次出现次数 -->
        <div class="numstatistics-result-ball">
          <his-ball-table :hisBallDataVar="parentHisBallData"></his-ball-table>
        </div>
      </div>
    </div>
    </div>
    <!-- 长龙提醒 -->
    <div v-if="isChangLongLianKaiShow" class="ll-content-changlongliankai">
      <div class="changlongliankai-title-area">
        <span class="changlongliankai-title-text">长龙连开提醒</span>
      </div>
      <div class="changlongliankai-result-show">
        <span class="changlongliankai-result-content" v-for="(item,index) in lianKaiTiXingDataVar" :key="index">{{item}}</span>
      </div>
    </div>
    <!-- 号码分析 -->
    <div v-if="isNumAnalyzeShow" class="ll-content-numanalyze">
      <!-- 号码选择 -->
      <div class="check-ball-number">
        <div class="numanalyze-title-area">
          <span class="numanalyze-title-text">{{numDataVar.title}}</span>
        </div>
        <div class="ball-number-lists">
          <span v-for="(item,index) in numDataVar.content" :key="index" @click="chooseBallNumFuc(index,item.content)" :class="{active:item.status}">{{item.content}}</span>
        </div>
      </div>
      <!-- 大小单双选择 -->
      <div class="check-bigsm-oddev">
        <div class="numanalyze-title-area">
          <span class="numanalyze-title-text">{{bigSmallEvenOddDataVar.title}}</span>
        </div>
        <div class="ball-number-lists bigsm-oddev-lists">
          <span v-for="(item,index) in bigSmallEvenOddDataVar.content" :key="index" :class="{active:item.status}" @click="chooseBigSmallEvenOddFuc(index,item.content)">{{item.content}}</span>
          <span class="special-span" @click="clickCancelAllFuc">还原</span>
        </div>
      </div>
    </div>
    <!-- 历史开奖页面底部表格 -->
    <div class="ll-content-bottomTale">
      <his-page-bottom-table v-if="this.$store.state.lotteryType != 'l28' && this.$store.state.lotteryType != 'pk10' && this.$store.state.lotteryType != 'k3' && this.$store.state.lotteryType != 'l3d'" :hisBottomTableTotalData='LLBottomTableTotalData' :clickedNumIndex='numberIndexArr' :clickedCancelAll='isParentClickedCancelAll' :clickBigSmall='parentClickedBigSmall'>
      </his-page-bottom-table>
      <his-page-bottom-tablebj v-if="this.$store.state.lotteryType == 'pk10'" :hisBottomTableTotalData='LLBottomTableTotalData' :clickedNumIndex='numberIndexArr' :clickedCancelAll='isParentClickedCancelAll' :clickBigSmall='parentClickedBigSmall'>
      </his-page-bottom-tablebj>
      <his-page-bottom-tablepc v-if="this.$store.state.lotteryType == 'l28'||this.$store.state.lotteryType == 'k3' || this.$store.state.lotteryType == 'l3d'" :hisBottomTableTotalData='LLBottomTableTotalData'></his-page-bottom-tablepc>
    </div>
  </div>
</template>
<script>
import HisNumTable from "./HisNumTable";
import HisBallTable from "./HisBallTable";
import HisPageBottomTable from "./HisPageBottomTable";
import HisPageBottomTablebj from "../../bj10//HisPageBottomTableBj";
import HisPageBottomTablepc from "../../jndpc/HisPageBottomTablePc";
export default {
  components: {
    HisNumTable,
    HisBallTable,
    HisPageBottomTable,
    HisPageBottomTablebj,
    HisPageBottomTablepc
  },
  props: {
    hisClickIndex: {
      //历史开奖里被点击的tabs
      type: Array
    }
  },
  mounted() {
    this.getPageTotalData();
    this.axios
      .get("analyse/getObtainLotteryLabelMenu", {
        params: {
          lottery_id: this.$route.params.caizhongID
        }
      })
      .then(res => {
        if (res.data.status) {
          this.lskjdata = res.data.data;
          this.pclskj = this.lskjdata[0];
        } else {
          this.log(res.data.message);
        }
      })
      .catch(err => {
        this.log(err);
      });
      if(this.hisClickIndex){
        this.hisClickIndexChangeFuc(this.hisClickIndex)
      }else{
        this.isJinRiNumberShow = true;
      }
  },
  data() {
    return {
      queryNum: 30,
      numberStatisLists: [], //号码和出现次数
      isJinRiNumberShow: false, //是否显示今日双面/号码统计内容
      isChangLongLianKaiShow: false, //是否显示长龙提醒内容
      isNumAnalyzeShow: false, //是否显示号码分析内容
      lianKaiTiXingDataVar: [], //长龙提醒数据
      numBigSmallEvenOddDataVar: [],
      numDataVar: {},
      bigSmallEvenOddDataVar: {},
      parentHisBallData: [], //球次和出现次数
      LLBottomTableTotalData: [], //历史开奖底部表格数据
      numberIndexArr: [],
      isParentClickedCancelAll: false,
      parentClickedBigSmall: [],
      lskjdata: [],
      pclskj: {}
    };
  },
  methods: {
    //获取球次和号码的出现次数
    getHisBallNumStatisData() {
      this.axios
        .get("hall/getObtainStatisticsList", {
          params: {
            lottery_id: this.$route.params.caizhongID,
            limit: this.queryNum
          }
        })
        .then(res => {
          if (res.data.status) {
            this.numberStatisLists = res.data.data.numberAppearCount;
            this.parentHisBallData = res.data.data.numberOrderAppearCount;
          } else {
            this.log(res.data.message);
          }
        })
        .catch(err => {
          this.log(err);
        });
    },
    //获取底部表格数据
    getHisBottomTableData() {
      this.axios
        .get("hall/getObtainNumberAnalysisList", {
          params: {
            lottery_id: this.$route.params.caizhongID,
            limit: this.queryNum
          }
        })
        .then(res => {
          if (res.data.status) {
            this.LLBottomTableTotalData = res.data.data;
          } else {
            this.log(res.data.message);
          }
        })
        .catch(err => {
          this.log(err);
        });
    },
    //获取页面全部数据
    getPageTotalData() {
      if (this.$store.state.lotteryType == "l28") {
        this.getHisBottomTableData();
        this.isChangLongLianKaiShow = false;
        this.isNumAnalyzeShow = false;
      } else if (this.$store.state.lotteryType == "k3") {
        this.getHisBottomTableData();
        this.isChangLongLianKaiShow = false;
        this.isNumAnalyzeShow = false;
      } else if (this.$store.state.lotteryType == "l3d") {
        this.getHisBottomTableData();
        this.isChangLongLianKaiShow = false;
        this.isNumAnalyzeShow = false;
      } else {
        this.getHisBallNumStatisData();
        this.getHisBottomTableData();
      }
    },
    //获取长龙提醒数据
    getChangLongData() {
      this.axios
        .get("hall/getObtainLongDragonRemindList", {
          params: {
            lottery_id: this.$route.params.caizhongID,
            limit: this.queryNum
          }
        })
        .then(res => {
          if (res.data.status) {
            this.lianKaiTiXingDataVar = res.data.data;
          } else {
            this.log(res.data.message);
          }
        })
        .catch(err => {
          this.log(err);
        });
    },
    //点击查询
    llQueryData() {
      if (this.queryNum > 200) {
        this.queryNum = 200;
      } else if (this.queryNum == 0) {
        this.queryNum = 1;
      }
      this.getPageTotalData();
      this.getChangLongData();
    },
    //点击球号
    chooseBallNumFuc(index, val) {
      val = val.substring(2);
      this.numDataVar.content.forEach((el, i) => {
        if (
          this.$store.state.lotteryType == "pk10" ||
          this.$store.state.lotteryType == "l11x5"
        ) {
          if (index == i) {
            if (el.status) {
              el.status = 0;
              this.numberIndexArr.splice(this.numberIndexArr.indexOf(val), 1);
            } else {
              el.status = 1;
              this.numberIndexArr.push(val);
            }
          }
        } else {
          if (index == i) {
            if (el.status) {
              el.status = 0;
              this.numberIndexArr.splice(this.numberIndexArr.indexOf(index), 1);
            } else {
              el.status = 1;
              this.numberIndexArr.push(index);
            }
          }
        }
      });
      this.bigSmallEvenOddDataVar.content.forEach(el => {
        el.status = 0;
      });
      this.isParentClickedCancelAll = false;
    },
    //点击大小单双对子号
    chooseBigSmallEvenOddFuc(index, contentText) {
      //点击大小单双
      this.bigSmallEvenOddDataVar.content.forEach((el, i) => {
        if (index == i) {
          el.status = 1;
        } else {
          el.status = 0;
        }
      });
      this.parentClickedBigSmall = [contentText];
      this.numDataVar.content.forEach(el => {
        el.status = 0;
      });
      this.isParentClickedCancelAll = false;
    },
    //点击还原
    clickCancelAllFuc() {
      this.numDataVar.content.forEach(el => {
        el.status = 0;
      });
      this.bigSmallEvenOddDataVar.content.forEach(el => {
        el.status = 0;
      });
      this.isParentClickedCancelAll = true;
    },
    // fetchData() {
    //   this.getPageTotalData();
    // },
    //点击历史开奖里的号码分析和长龙提醒
    hisClickIndexChangeFuc(item) {
      switch (item[1]) {
        case "jrsm":
          if (item[0] == 1) {
            this.isJinRiNumberShow = true;
            this.getHisBallNumStatisData();
          } else {
            this.isJinRiNumberShow = false;
          }
          break;
        case "hmfx":
          if (item[0] == 1) {
            this.isNumAnalyzeShow = true;
            this.axios
              .get("hall/getObtainBallNumberDistribution", {
                params: {
                  lottery_id: this.$route.params.caizhongID
                }
              })
              .then(res => {
                if (res.data.status) {
                  this.numBigSmallEvenOddDataVar = res.data.data;
                  this.numDataVar = this.numBigSmallEvenOddDataVar[0];
                  this.bigSmallEvenOddDataVar = this.numBigSmallEvenOddDataVar[1];
                } else {
                  this.log(res.data.message);
                }
              })
              .catch(err => {
                this.log(err);
              });
          } else {
            this.isNumAnalyzeShow = false;
          }
          break;
        case "cltx":
        this.isChangLongLianKaiShow = true;
          if (item[0] == 1) {
            this.isChangLongLianKaiShow = true;
            this.getChangLongData();
          } else {
            this.isChangLongLianKaiShow = false;
          }
          break;
      // if (index == 1) {
      //   this.isNumAnalyzeShow = true;
      //   this.axios
      //     .get("hall/getObtainBallNumberDistribution", {
      //       params: {
      //         lottery_id: this.$route.params.caizhongID
      //       }
      //     })
      //     .then(res => {
      //       if (res.data.status) {
      //         this.numBigSmallEvenOddDataVar = res.data.data;
      //         this.numDataVar = this.numBigSmallEvenOddDataVar[0];
      //         this.bigSmallEvenOddDataVar = this.numBigSmallEvenOddDataVar[1];
      //       } else {
      //         this.log(res.data.message);
      //       }
      //     })
      //     .catch(err => {
      //       this.log(err);
      //     });
      // } else if (index == 2) {
      //   this.isChangLongLianKaiShow = true;
      //   this.getChangLongData();
      // }
      }
    }
  },
  watch: {
    // $route: "fetchData",
    hisClickIndex() {
      this.hisClickIndexChangeFuc(this.hisClickIndex);
    }
  }
};
</script>
<style lang="less" scoped>
@import url(../../../assets/css/llpagehiscss.less);
</style>
